<template>
  <div>
    <div class="top">
      <van-nav-bar
        title="手机号注册"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div>
      <van-cell-group>
        <van-field
          :v-model="phone"
          label="手机号"
          placeholder="请输入手机号"
          @keyup.enter="btnenter"
        />
      </van-cell-group>
      <van-field
        v-model="sms"
        center
        clearable
        label="动态码"
        placeholder="请输入动态码"
      >
        <template #button>
          <div @click="resetCode()">
            <registerCode :identifyCode="code" :contentWidth="100" :contentHeight="40"></registerCode>
          </div>
        </template>
      </van-field>
      <van-field
        v-model="sms"
        center
        clearable
        label="验证码"
        placeholder="请输入验证码"
      >
        <template #button>
          <van-button size="small" type="primary" class="bustton">获取验证码</van-button>
        </template>
      </van-field>
      <div class="labets">
        <van-checkbox v-model="checked" shape="square">我已阅读并同意<span style="color:rgba(42, 130, 228, 1)">《用户注册协议》</span>
        </van-checkbox>
      </div>
      <div class="buttons">
        <van-button style="width:345px;" type="info" @click="SNP">下一步</van-button>
      </div>
      <div class="zuihou">
        <p>没有手机号？<span @click="numberRes">证件号注册</span></p>
      </div>
    </div>
  </div>
</template>

<script>
    // import comput from '../Dynamic/code.vue'
    import registerCode from "@/components/code"

    export default {
        mounted() {
            this.resetCode();
        },
        data() {
            return {
                phone: '',
                sms: '',
                checked: '',
                code: '',
            };
        },
        components: {
            registerCode,
        },
        methods: {
            onClickLeft() {
                this.$router.push('register')
            },
            SNP() {
                this.$router.push('snp')
            },
            btnenter() {

            },
            /**
             * 重置验证码
             */
            resetCode() {
                this.code = "";
                const codeList = "zxcvbnmasdfghjklqwertyuiop1234567890";
                for (let i = 0; i < 4; i++) {
                    let random = Math.floor((Math.random() * codeList.length) + 0);
                    this.code += codeList[random]
                }
            },
            numberRes() {
                this.$router.push('register')
            }
        },
    };
</script>

<style scoped>
  .labets {
    margin-left: 15px;
    color: rgba(80, 80, 80, 1);
    font-size: 14px;
    line-height: 150%;
    text-align: left;
    margin-top: 20px;
  }

  .buttons {
    text-align: center;
    margin-top: 100px;
  }

  .zuihou {
    color: rgba(80, 80, 80, 1);
    font-size: 14px;
    text-align: center;
    margin-top: 40px

  }

  .zuihou p span {
    color: rgba(42, 130, 228, 1);
  }
  .van-field__butto{
color: rgba(166, 166, 166, 1);
  }
  .bustton{
    background-color: #FFFFFF;
    color:  rgba(166, 166, 166, 1);
    border: 1px solid #FFFFFF;
  }
</style>
